

<template>
    <div>
        <h3 class="mt-4 mb-2 pl-2" :style="{ borderLeft: `3px solid ${data.color}`}">{{data.table_title}}</h3>
        <v-card outlined class="rounded-lg">
            <v-card-text>
                <v-row>
                    <v-col>
                        <h3 class="mb-4 " :style="{ color: data.color }">
                            {{data.title}}
                        </h3>
                        <div>
                            <v-chip outlined small :style="{ border: `1px solid ${data.color}`, color: data.color }" v-for="(d, i) in data.tag" :key="i">{{d}}</v-chip>
                        </div>
                    </v-col>
                    <v-col cols="4">
                        <v-img aspect-ratio="1" :src="data.code_url"> </v-img>
                    </v-col>
                </v-row>
            </v-card-text>
        </v-card>
        <v-btn icon @click="handleClick" style="left: 50px">
            <v-icon>mdi-delete</v-icon>&nbsp;&nbsp;删除组件
        </v-btn>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
        },
        id: {
            type: Number,
        }
    },
    methods: {
        handleClick() {
            this.$emit('del');
        },
    },
};
</script>
